{% extends 'TopxiaWebBundle::layout.html.twig' %}

{% block title %} {{'支付中心'|trans}} - {{ parent() }}{% endblock %}
{% set script_controller = 'pay/select' %}
{% block esBar %}
{% endblock %}
{% block content %}
<div class="order-pay">

  <div class="es-section">
    <ul class="es-step es-step-3 clearfix">
      <li class="done"><span class="number"><i class="es-icon es-icon-done"></i></span>{{'订单确认'|trans}}</li>
      <li class="doing"><span class="number">2</span>{{'订单支付'|trans}}</li>
      <li><span class="number">3</span>{{'订单完成'|trans}}</li>
    </ul>
    <div class="order-pay-body">
      <div class="alert alert-success alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
        {{'订单已提交，请在４８小时内完成支付！逾期订单将被取消。'|trans}}
      </div>

      {{ render(controller(template , {'sn':sn})) }}

      <div class="es-piece" style="margin-bottom:20px;"><div class="piece-header">{{'支付方式'|trans}}</div></div>
      <form class="form-paytype" method="post" action="{{path('pay_center_pay')}}">
        <input type="hidden" name="targetType" value="{{order.targetType}}">
        <input type="hidden" name="orderId" value="{{order.id}}"/>
        
        {% set activePayment = order.payment %}
        {% for payment,options in payments %}
          {% if ( not is_micro_messenger() and activePayment == 'none' ) 
            or (is_micro_messenger() and activePayment in ['none', 'alipay'] and not (payment == 'alipay')) %}
            {% set activePayment = payment %}
          {% endif %}
        {% endfor %}
        <input type="hidden" name="payment" value={{activePayment}}>
        <input type="hidden" name="_csrf_token" value="{{ csrf_token('site') }}">
        <div class="form-group order-detail-bg">
          {% for payment, options in payments %}
            {% if payment == 'alipay' and is_micro_messenger() %}
            <p class="color-danger">如需使用支付宝支付，请在其他浏览器中重新下单。<a id='copy' class="hidden" href='javascript:;'>复制地址</a></p>
            <div class="check disabled">
              {% set picture = 'assets/img/order/'~payment~'.png' %}
              <img src="{{ asset(picture) }}" />
              <span class="icon"></span>
            </div>
            {% else %}
            <div class="check {% if payment == activePayment %} active {% endif %}" id="{{payment}}">
              {% set picture = 'assets/img/order/'~payment~'.png' %}
              <img src="{{ asset(picture) }}" />
              <span class="icon"></span>
            </div>
            {% endif %}
          {% else %}
            <div class="pay-type-label text-warning ">{{'支付方式未开启，请联系管理员。'|trans}}</div>
          {% endfor %}
          {% if payAgreements is not empty %}
          <div class="js-pay-agreement" style="display:none">
            <ul class="pay-agreement-list row">
              {% for payAgreement in payAgreements %}
                <li id="unbind-bank-{{payAgreement.id}}" class="col-md-6 js-pay-bank {% if loop.index0 == 0 %}checked{% endif %}">
                  <div class="pay-bank clearfix">
                    <input class="hidden" type="radio" name='payAgreementId' value="{{payAgreement.id}}" {% if loop.index0 == 0 %}checked{% endif %} />
                    <span class="name">{{payAgreement.bankName}}</span>
                    <span class="number">***{{payAgreement.bankNumber}}</span>
                    <span class="hidden-xs">{% if payAgreement.type == 0 %}{{'储蓄卡'|trans}}{% else %}{{'信用卡'|trans}}{% endif %}</span>
                    <a href="javascript:;" class="closed visible-lg" data-url="{{ path('auth_unbind_mobile_show')}}"><i class="es-icon es-icon-icon_close_circle"></i></a>
                  </div>
                </li>
              {% endfor %}
              <li class="col-md-6 js-pay-bank">
                <div class="pay-bank">
                  <input class="hidden" type="radio" name='payAgreementId' value=""/>
                  <span class="color-gray">{{'使用新的银行卡'|trans}}</span>
                </div>
              </li>
            </ul>
          </div>
          {% endif %}
        </div>
        <div class="form-group">
          <div class="total-price">
            {{'应付金额：'|trans}}
            <span role="pay-rmb" class="pay-rmb">￥{{order.amount}}</span>
          </div>
        </div>
        <div class="form-group text-right">
          {% if targetType in ['course', 'classroom', 'vip'] %}
            {% include 'TopxiaWebBundle:PayCenter:' ~ targetType ~ '-cancelled.html.twig' %}
          {% endif %}
          <button class="pay-button btn btn-primary"  type="submit">{{'确认支付'|trans}}</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}